<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8" />
        <title>BoxGroup - ESUI Demo</title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="assets/google-code-prettify/prettify.css" />
        <link rel="stylesheet" href="assets/themes/standard.css" />
        <!--[if lt IE 9]>
        <link rel="stylesheet" href="assets/ie8.css" />
        <![endif]-->
    </head>
<body>
    <div class="header">
        <h1 id="branding">ESUI - BoxGroup</h1>
    </div>
    <div class="ui-g main-container">
        <div id="side-bar" class="ui-u-1-5">
            <ul id="navigator" class="ui-nav">
            </ul>
        </div>
        <div id="main" class="ui-u-4-5">
            <h2>Radio Group</h2>
            <div class="intro">
                <p>创建多个单选按钮，在包裹着按钮的<code>div</code>元素中添加属性<code>data-ui-type="BoxGroup" data-ui-box-type="radio"</code>即可创建单选按钮组。</p>
            </div>
            <div class="example ui-demo-light-stage">
                <div data-ui-disabled-items="er,esui" data-ui-type="BoxGroup" data-ui-id="box-group-horizontal" data-ui-name="frameworks2" data-ui-box-type="radio" data-ui-box-class="ui-radio-custom">
                    <div>
                        <input type="radio" id="framework-er1" name="frameworks2" value="er">
                        <label for="framework-er1">ER</label>
                    </div>
                    <div>
                        <input type="radio" id="framework-esui1" name="frameworks2" value="esui" checked>
                        <label for="framework-esui1">ESUI</label>
                    </div>
                    <div>
                        <input type="radio" id="framework-ef1" name="frameworks2" value="ef">
                        <label for="framework-ef1">EF</label>
                    </div>
                    <div>
                        <input type="radio" id="framework-tangram1" name="frameworks2" value="tangram">
                        <label for="framework-tangram1">Tangram</label>
                    </div>
                </div>
            </div>
            <h2>Radio Group 带箭头</h2>
            <div class="intro">
                <p>在父元素添加<code>.ui-boxgroup-arrow</code>以在选中radio下方出现箭头，</p>
                <p>如果要禁用某个radio的箭头，在对应input元素添加<code>.ui-boxgroup-arrow-hidden</code>,</p>
                <p>对应panel需添加class<code>.ui-panel-boxgroup-border</code></p>
            </div>
            <div class="example ui-demo-light-stage">
                <div class="ui-boxgroup-arrow" data-ui-type="BoxGroup" data-ui-id="box-group-horizontal-arrow" data-ui-name="frameworks-arrow" data-ui-box-type="radio" data-ui-box-class="ui-radio-custom">
                    <div>
                        <input type="radio" id="framework-er-arrow" name="frameworks-arrow" value="er">
                        <label for="framework-er-arrow">ER</label>
                    </div>
                    <div>
                        <input class="ui-boxgroup-arrow-hidden" type="radio" id="framework-esui-arrow" name="frameworks-arrow" value="esui">
                        <label for="framework-esui-arrow">ESUI</label>
                    </div>
                    <div>
                        <input type="radio" id="framework-ef-arrow" name="frameworks-arrow" value="ef" checked>
                        <label for="framework-ef-arrow">EF</label>
                    </div>
                    <div>
                        <input type="radio" id="framework-tangram-arrow" name="frameworks-arrow" value="tangram">
                        <label for="framework-tangram-arrow">Tangram</label>
                    </div>
                </div>
                <div class="ui-panel-boxgroup-border-top"></div>
            </div>
            <h2>Checkbox Group</h2>
            <div class="intro">
                <p>创建多个多选框，在包裹着多选框的<code>div</code>元素中添加属性<code>data-ui-type="BoxGroup" data-ui-box-type="checkbox"</code>即可创建多选按钮组。</p>
            </div>
            <div class="example ui-demo-light-stage">
                <div data-ui-type="BoxGroup" data-ui-id="box-group-change-horizontal" data-ui-name="frameworks4" data-ui-box-type="checkbox" data-ui-box-class="ui-checkbox-custom">
                    <ul>
                        <li>
                            <input type="checkbox" id="framework-er3" name="frameworks4" value="er">
                            <label for="framework-er3">ER</label>
                        </li>
                        <li>
                            <input type="checkbox" id="framework-esui3" name="frameworks4" value="esui">
                            <label for="framework-esui3">ESUI</label>
                        </li>
                        <li>
                            <input type="checkbox" id="framework-ef3" name="frameworks4" value="ef">
                            <label for="framework-ef3">EF</label>
                        </li>
                        <li>
                            <input type="checkbox" id="framework-tangram3" name="frameworks4" value="tangram">
                            <label for="framework-tangram3">Tangram</label>
                        </li>
                    </ul>
                </div>
            </div>
            <h2>垂直对齐</h2>
            <div class="intro">
                <p>默认为水平对齐，通过设置属性<code>data-ui-orientation="vertical"</code>可实现垂直对齐。</p>
            </div>
            <div class="example ui-demo-light-stage">
                <div data-ui-type="BoxGroup" data-ui-id="box-group-vertical" data-ui-name="frameworks1" data-ui-box-type="radio" data-ui-box-class="ui-radio-custom" data-ui-orientation="vertical">
                    <div>
                        <input type="radio" id="framework-er" name="frameworks1" value="er">
                        <label for="framework-er">ER</label>
                    </div>
                    <div>
                        <input type="radio" id="framework-esui" name="frameworks1" value="esui" checked>
                        <label for="framework-esui">ESUI</label>
                    </div>
                    <div>
                        <input type="radio" id="framework-ef" name="frameworks1" value="ef">
                        <label for="framework-ef">EF</label>
                    </div>
                    <div>
                        <input type="radio" id="framework-tangram" name="frameworks1" value="tangram">
                        <label for="framework-tangram">Tangram</label>
                    </div>
                </div>
            </div>
            <h2>自定义样式</h2>
            <div class="intro">
                <p>添加类<code>.ui-boxgroup-button-style</code>可设置为Button，添加类<code>ui-boxgroup-button-style-primary</code>可自定义按钮的样式。</p>
                <p>添加类<code>.ui-boxgroup-button-style-separated</code>可实现按钮之间的分离。</p>
            </div>
            <div class="example ui-demo-light-stage">
                <div class="row">
                    <div data-ui-type="BoxGroup" data-ui-id="box-group-button"
                         data-ui-name="frameworks5" data-ui-box-type="radio"
                         class="ui-boxgroup-button-style ui-boxgroup-button-style-separated ui-boxgroup-button-style-primary">
                        <ul>
                            <li>
                                <input type="radio" id="framework-er4" name="frameworks5" value="er" checked />
                                <label for="framework-er4">ER</label>
                            </li>
                            <li>
                                <input type="radio" id="framework-esui4" name="frameworks5" value="esui"/>
                                <label for="framework-esui4">ESUI</label>
                            </li>
                            <li>
                                <input type="radio" id="framework-ef4" name="frameworks5" value="ef"/>
                                <label for="framework-ef4">EF</label>
                            </li>
                            <li>
                                <input type="radio" id="framework-tangram4" name="frameworks5" value="tangram"/>
                                <label for="framework-tangram4">Tangram</label>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <div data-ui-type="BoxGroup"
                         data-ui-name="frameworks6" data-ui-box-type="radio"
                         class="ui-boxgroup-button-style ui-boxgroup-button-style-separated ui-boxgroup-button-style-success">
                        <ul>
                            <li>
                                <input type="radio" id="framework-er5" name="frameworks6" value="er" checked />
                                <label for="framework-er5">ER</label>
                            </li>
                            <li>
                                <input type="radio" id="framework-esui5" name="frameworks6" value="esui"/>
                                <label for="framework-esui5">ESUI</label>
                            </li>
                            <li>
                                <input type="radio" id="framework-ef5" name="frameworks6" value="ef"/>
                                <label for="framework-ef5">EF</label>
                            </li>
                            <li>
                                <input type="radio" id="framework-tangram5" name="frameworks6" value="tangram"/>
                                <label for="framework-tangram5">Tangram</label>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <div data-ui-type="BoxGroup"
                         data-ui-name="frameworks7" data-ui-box-type="radio"
                         class="ui-boxgroup-button-style ui-boxgroup-button-style-separated ui-boxgroup-button-style-info">
                        <ul>
                            <li>
                                <input type="radio" id="framework-er6" name="frameworks7" value="er" checked />
                                <label for="framework-er6">ER</label>
                            </li>
                            <li>
                                <input type="radio" id="framework-esui6" name="frameworks7" value="esui"/>
                                <label for="framework-esui6">ESUI</label>
                            </li>
                            <li>
                                <input type="radio" id="framework-ef6" name="frameworks7" value="ef"/>
                                <label for="framework-ef6">EF</label>
                            </li>
                            <li>
                                <input type="radio" id="framework-tangram6" name="frameworks7" value="tangram"/>
                                <label for="framework-tangram6">Tangram</label>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <div data-ui-type="BoxGroup"
                         data-ui-name="frameworks8" data-ui-box-type="radio"
                         class="ui-boxgroup-button-style ui-boxgroup-button-style-separated ui-boxgroup-button-style-warning">
                        <ul>
                            <li>
                                <input type="radio" id="framework-er7" name="frameworks8" value="er" checked />
                                <label for="framework-er7">ER</label>
                            </li>
                            <li>
                                <input type="radio" id="framework-esui7" name="frameworks8" value="esui"/>
                                <label for="framework-esui7">ESUI</label>
                            </li>
                            <li>
                                <input type="radio" id="framework-ef7" name="frameworks8" value="ef"/>
                                <label for="framework-ef7">EF</label>
                            </li>
                            <li>
                                <input type="radio" id="framework-tangram7" name="frameworks8" value="tangram"/>
                                <label for="framework-tangram7">Tangram</label>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <div data-ui-type="BoxGroup"
                         data-ui-name="frameworks9" data-ui-box-type="radio"
                         class="ui-boxgroup-button-style ui-boxgroup-button-style-separated ui-boxgroup-button-style-danger">
                        <ul>
                            <li>
                                <input type="radio" id="framework-er8" name="frameworks9" value="er" checked />
                                <label for="framework-er8">ER</label>
                            </li>
                            <li>
                                <input type="radio" id="framework-esui8" name="frameworks9" value="esui"/>
                                <label for="framework-esui8">ESUI</label>
                            </li>
                            <li>
                                <input type="radio" id="framework-ef8" name="frameworks9" value="ef"/>
                                <label for="framework-ef8">EF</label>
                            </li>
                            <li>
                                <input type="radio" id="framework-tangram8" name="frameworks9" value="tangram"/>
                                <label for="framework-tangram8">Tangram</label>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <h2>监听事件</h2>
            <div class="intro">
                <p>使用<code>change</code>事件监听选中状态的变化。</p>
            </div>
            <div class="example ui-demo-light-stage">
                <div class="row">
                    <div data-ui-type="BoxGroup" data-ui-id="box-group-button2"
                         data-ui-name="frameworks11" data-ui-box-type="checkbox"
                            class="ui-boxgroup-button-style ui-boxgroup-button-style-separated custom">
                        <ul>
                            <li>
                                <input type="checkbox" id="framework-er10" name="frameworks11" value="er"/>
                                <label for="framework-er10">ER</label>
                            </li>
                            <li>
                                <input type="checkbox" id="framework-esui10" name="frameworks11" value="esui"/>
                                <label for="framework-esui10">ESUI</label>
                            </li>
                            <li>
                                <input type="checkbox" id="framework-ef10" name="frameworks11" value="ef"/>
                                <label for="framework-ef10">EF</label>
                            </li>
                            <li>
                                <input type="checkbox" id="framework-tangram10" name="frameworks11" value="tangram"/>
                                <label for="framework-tangram10">Tangram</label>
                            </li>
                        </ul>
                    </div>
                </div>
                <p id="box-group-change-log">已选值：</p>
            </div>
            <script type="text/sample">
                function () {
                    require('esui').get('box-group-button2').on(
                        'change',
                        function () {
                            $('#box-group-change-log').text('已选值：' + this.getValue());
                        }
                    );
                }
            </script>
        </div>
    </div>
    <script src="assets/loader/esl.js"></script>
    <script src="config.js"></script>
    <script src="demo.js"></script>
    <script src="assets/google-code-prettify/prettify.js"></script>
    <script id="main-js">
    require(
        [
            'esui',
            'jquery',
            'esui/BoxGroup',
            'esui/Tab',
            'demo'
        ],
        function (ui, $) {
            ui.init();
            ui.get('box-group-button2').on(
                'change',
                function () {
                    $('#box-group-change-log').text('已选值：' + this.getValue());
                }
            );
        }
    );
    </script>
    <script src="sitemap.js"></script>
</body>
</html>
